<template>
  <div style="text-align: left;">
    <!--
       修改密码
       path:dbasicinformation
   -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="修改密码" name="first">
        <div>
          <el-form :model="passForm" :rules="rules" ref="passFormRef" :label-position="labelPosition" label-width="200px"
                   style="height: auto; margin-top: 10px;">
            <el-form-item label="手机号:" prop="phone">
              <el-input v-model="passForm.phone" placeholder="请输入手机号" style="width: 300px" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="重置密码:" prop="waitOne">
              <el-input v-model="passForm.waitOne" placeholder="请输入新密码" style="width: 300px" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确定密码:" prop="password_confirm" >
              <el-input v-model="passForm.waitOne_confirm" placeholder="请再次输入新密码" style="width: 300px" type="password"></el-input>
            </el-form-item>
            <el-form-item label="图形验证:">
              <Vcode :show="isShow" @success="success" @close="close"/>
              <el-button type="primary" round @click="verify" :disabled="isDis" size="small">点击进行验证</el-button>
              <span :style="'color:'+color+';font-size:12px;'"><i :class="icon"></i>{{ verifyText }}</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="passUpd" :disabled="btnShow"
                         style="color: white;width: 200px">保存
              </el-button>
              <el-button @click="disUpd('passFormRef')" style="width: 86px">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import qs from "qs";
import Vcode from 'vue-puzzle-vcode';
export default {
  name: "DUpdate",
  //图形验证
  components: {
     Vcode
  },
  mounted() {
    let item = sessionStorage.getItem("uid");
    this.passForm.uid=item;
    this.queryInfo();
  },
  data() {
    return {
      //表格数据
      passForm: {
        uid:'',
        phone:'',
        waitOne: '',
        waitOne_confirm: '',
        isCheck: '',
      },
      activeName: 'first',
      //字体右对齐
      labelPosition: 'right',
      //修改的校验规则
      rules: {
        /* useripone: {required: true, message: '请输入', trigger: 'blur'},
         */
      },
      isShow: false,
      isDis: false,
      verifyText: '',
      color: '',
      icon: '',
      btnShow: false,

    }
  },
  methods: {
    //图形验证
    verify() {
      this.isShow = true;
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      this.passForm.isCheck = true;
      // 验证成功后失效组件
      this.isDis = true;
      this.verifyText = "验证成功";
      this.color = "green";
      this.btnShow = false;
      // 成功的图标
      this.icon = "el-icon-success";
    },
    // 用户未通过验证，用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
      this.verifyText = "验证失败";
      this.color = "red";
      this.btnShow = true;
      // 失败的图标q
      this.icon = "el-icon-error";
    },
    //查询
    queryInfo() {
      this.$axios.get("teacher-front/demo/user/queryByUId?uid="+this.passForm.uid).then(r=>{
        this.passForm.phone=r.data.phone;
      })
    },
    passUpd() {
      if (!/^[a-zA-Z0-9]{6,20}$/.test(this.passForm.waitOne)) {
        this.$alert('请输入规范的密码', '提示', {
          confirmButtonText: '确定',
        });
      }else{
        if(this.passForm.waitOne==this.passForm.waitOne_confirm){
          if(this.passForm.isCheck){
              //alert(JSON.stringify(this.passForm))
            this.$axios.post("teacher-front/demo/user/upduser",qs.stringify(this.passForm)).then(r=>{
              // alert(r.data.obj==1)
              if(r.data.obj==1){
                this.$message.success("修改成功");
                this.queryInfo();
                this.$router.push("/logincenter");
              }
            })
          }else{
            this.$message.error("请先进行图片验证");
          }
        }else {
          this.$message.error("两次密码不一致");
        }
      }
    },
    //点击表格中修改按钮弹出框中 取消 按钮清空填入的内容
    disUpd(formName) {
      this.$refs[formName].resetFields();
      this.queryInfo();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>

</style>
